<template>
  <div class="flex-1">
    <!-- title -->
    <div
      class="p-[0_30px] h-50px flex items-center b-b b-b-solid b-b-[#e1e2e5] box-border"
    >
      <span class="inline-block w4px h13px bg-#00a1d6 m-r-5px"></span>
      <span class="c-#00a1d6 text-14px">我的记录</span>
    </div>

    <!-- label-item -->
    <div
      class="p-[0_30px] h-48px flex items-center b-b b-b-solid b-b-[#e1e2e5] box-border"
    >
      <div
        class="w-56px h-48px leading-48px c-#000 text-14px box-border cursor-pointer text-center relative"
        v-for="(item, index) in tabs"
        :class="[
          item.active && '!c-#00a1d6 b-b b-b-solid b-b-#00a1d6',
          index > 0 && 'm-l-38px',
        ]"
        @click="tabs.forEach((tab, i) => (tab.active = i === index))"
      >
        {{ item.label }}
        <div
          class="w-0 h-0 b-l-3 b-r-3 b-t-0 b-b-3 b-solid b-l-transparent b-r-transparent b-b-#00a1d6 absolute left-50% translate-x-[-50%] bottom-0px"
          v-if="item.active"
        ></div>
      </div>
    </div>

    <!-- label-content -> 登录记录 -->
    <div class="p-[20px_40px] text-12px c-#717171" v-if="tabs[0].active">

      <div class="b-b b-b-solid b-b-#ddd w-full leading-30px">
          <span class="text-14px c-#000 fw-800">登录记录</span>
          <span class="m-l-20px">您最近一周的变化情况</span>
      </div>

      <p class="m-[20px_0]">根据登录时间，IP，地理位置，若判断为异常情况，请在核实后及时 <span class="cursor-pointer c-#00a1d6 ml-10px">修改密码</span></p>

      <div class="flex gap-x-10px">
          <span>说明</span>
          <div>
              <p class="leading-20px">1：移动端登录，由于运营商是随机分配IP，往往存在与实际登录地不符的情况</p>
              <p class="leading-20px">2：若使用VPN或代理联网的，登录地无法准确记录</p>
              <p class="leading-20px">3：部分网络代理商的服务，存在IP地址不稳定的问题</p>
              <p class="leading-20px">4：使用哔哩哔哩账号登录的游戏，也存在一定程度的误报情况</p>
          </div>
      </div>
      
      <el-table class="m-t-20px" :data="loginInfoVOList" empty-text="没有登录记录哦( ゜- ゜)" :header-cell-style="{'background-color': '#e5e9ef'}" border>
        <el-table-column prop="loginTime" label="时间" align="center" />
        <el-table-column prop="ipaddr" label="变化" align="center" />
        <el-table-column prop="loginLocation" label="地理位置" align="center" />
      </el-table>

      <div class="m-t-20px flex justify-center">
        <el-pagination @current-change="handlePageChange" :current-page="loginInfoQuery.pageNum" :page-size="loginInfoQuery.pageSize" layout="prev, pager, next" :total="loginInfoTotal" hide-on-single-page />
      </div>
    </div>

    <!-- label-content -> 节操记录 -->
    <div class="p20px" v-if="tabs[1].active">
      <div>
          <p class="text-16px">我的节操值: <span class="c-#00a1d6">70</span></p>

          <div class="float-right b-rd-4px b b-solid b-#ced3db text-12px leading-20px p-l-10px cursor-pointer c-#6d757a hover:b-#00a1d6 hover:c-#00a1d6">
              节操相关帮助
              <span class="iconfont icon-jiantou2 v-mid"></span>
          </div>
      </div>

      <p class="text-12px c-#6d757a m-[20px_0]">每天登录可以恢复1点节操值(70封顶)。</p>

      <div class="p-[20px_0_5px] text-14px b-b b-b-solid b-b-#ddd">
          <span class="fw-800 c-#666">节操记录</span>
          <span class="ml20px text-12px c-#6d757a">您最近一周的变化情况</span>
      </div>

      <el-table class="m-t-20px" :data="tableData" empty-text="没有节操记录哦( ゜- ゜)" :header-cell-style="{'background-color': '#e5e9ef'}" border>
        <el-table-column prop="date" label="时间" align="center" />
        <el-table-column prop="name" label="变化" align="center" />
        <el-table-column prop="name" label="原因" align="center" />
        <el-table-column prop="name" label="说明" align="center" />
      </el-table>
    </div>

    <!-- label-content -> 经验记录 -->
    <div class="p20px" v-if="tabs[2].active">
      <div class="p-b-5px text-14px b-b b-b-solid b-b-#ddd">
          <span class="fw-800 c-#666">经验记录</span>
          <span class="ml20px text-12px c-#6d757a">您最近一周的变化情况</span>

          <span class="float-right c-#00a1d6 text-12px cursor-pointer">会员等级相关帮助>></span>
      </div>
      
      <el-table class="m-t-20px" :data="userLevelExperienceList" empty-text="没有经验记录哦( ゜- ゜)" :header-cell-style="{'background-color': '#e5e9ef'}" border>
        <el-table-column prop="createTime" label="时间" align="center" />
        <el-table-column prop="changeExperience" label="变化" align="center" />
        <el-table-column prop="changeType" label="原因" align="center" />
      </el-table>
      <div class="m-t-20px flex justify-center">
        <el-pagination @current-change="handlePageChangeULE" :current-page="userLevelExperienceQuery.pageNum" :page-size="userLevelExperienceQuery.pageSize" layout="prev, pager, next" :total="userLevelExperienceTotal" hide-on-single-page />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import {list as loginInfoListApi} from "@/api/loginInfo"
import {listUserLevelExperienceLog as listUserLevelExperienceLogApi} from "@/api/userLevelExperienceLog"
import {useUserStore} from "@/store/userStore";
import type { LoginInfoVO } from "@/api/loginInfo/types";
import type { UserLevelExperienceLogVO } from "@/api/userLevelExperienceLog/types";

const tabs = ref([
  { label: "登录记录", active: true },
  { label: "节操记录", active: false },
  { label: "经验记录", active: false },
]);

const userStore = useUserStore();

const loginInfoVOList = ref<LoginInfoVO[]>()
const loginInfoTotal = ref(0)
const loginInfoQuery = ref({
  userName: userStore.userInfo.userVo.userName,
  pageNum: 1,
  pageSize: 10,
});

const userLevelExperienceList = ref<UserLevelExperienceLogVO[]>()
const userLevelExperienceTotal = ref(0)
const userLevelExperienceQuery = ref({
  pageNum: 1,
  pageSize: 10,
});

const handlePageChange = (page: number) => {
  loginInfoQuery.value.pageNum = page
  getLoginInfoList()
}

const getLoginInfoList = async ()=>{
  
  const loginInfoListApiRes = await loginInfoListApi(loginInfoQuery.value);
  if(loginInfoListApiRes){
    loginInfoVOList.value = loginInfoListApiRes.rows;
    loginInfoTotal.value = loginInfoListApiRes.total;
  }
}

const handlePageChangeULE = (page: number) => {
  userLevelExperienceQuery.value.pageNum = page
  getlistUserLevelExperienceList()
}

const getlistUserLevelExperienceList = async ()=>{
  
  const loginInfoListApiRes = await listUserLevelExperienceLogApi(userLevelExperienceQuery.value);
  if(loginInfoListApiRes){
    userLevelExperienceList.value = loginInfoListApiRes.rows;
    userLevelExperienceTotal.value = loginInfoListApiRes.total;
  }
}

onMounted(async () => {
  getLoginInfoList();
  getlistUserLevelExperienceList();
});
</script>

<style scoped></style>
